<template>
	<div class="info">
		<div class="graybg"></div>
		<div class="header header_bg">
			<div class="header_left">
				<i onclick="javascript:history.back(-1)" class="iconfont baiColor">&#xe612;</i>
			</div>
			<div class="header_center">
				<span class="baiColor">我的</span>
			</div>
			<div class="header_right">
				<em class="baiColor" @click="save($event)" style="font-size: 16px;">保存</em>
			</div>
		</div>
		<div class="center" style="padding-top: 47px;">

			<section @click="touxiang" class="firstcd">
				<p class="pull-left">
					<span>我的头像</span>
				</p>
				<p class="pull-right">
					<img :src="infos.u_img" />
					<i class="iconfont">&#xe615;</i>
				</p>
			</section>

			<router-link :to="{name:'nicheng'}">
				<section>
					<p class="pull-left">
						<span>昵称</span>
					</p>
					<p class="pull-right">
						{{infos.u_name}}
						<i class="iconfont">&#xe615;</i>
					</p>
				</section>
			</router-link>
			<section @click="sex">
				<p class="pull-left">
					<span>姓别</span>
				</p>
				<p class="pull-right">
					<span v-text="sexbind">
						{{infos.u_sex}}
					</span>
					<i class="iconfont">&#xe615;</i>
				</p>
			</section>
			<section>
				<p class="pull-left">
					<span>系统编号</span>
				</p>
				<p class="pull-right">
					<span>{{infos.u_invite}}</span>
					<i class="iconfont">&#xe615;</i>
				</p>
			</section>
			<section>
				<p class="pull-left">
					<span>辅导员</span>
				</p>
				<p class="pull-right">
					{{infos.u_pid}}
					<i class="iconfont">&#xe615;</i>
				</p>
			</section>
			<section>
				<p class="pull-left">
					<span>所属服务中心</span>
				</p>
				<p class="pull-right">
					<span>{{infos.u_sc}}</span>
					<i class="iconfont">&#xe615;</i>
				</p>
			</section>
			<router-link :to="{name:'renzheng'}">
				<section>
					<p class="pull-left">
						<span>实名认证</span>
					</p>

					<p class="pull-right">
						<span>{{infos.u_real}}</span>
						<i class="iconfont">&#xe615;</i>
					</p>
				</section>
			</router-link>
			<section>
				<p class="pull-left">
					<span>地区</span>
				</p>
				<p class="pull-right">
					<span>{{infos.u_site}}</span>
					<i class="iconfont">&#xe615;</i>
				</p>
			</section>
		</div>

		<div class="sexShow" v-show="isShow" @click="xingbie">
			<div class="radio" @click="stopMaopao">
				<p @click="firstP('男')">
					<span :class="{sexspan:boySign}"></span>
					<b class="sign nan">男</b>
				</p>
				<p @click="secondP('女')">
					<span :class="{sexspan:girlSign}"></span>
					<b class="sign nv">女</b>
				</p>
			</div>
		</div>
		<div class="clearShow" v-show="touShow" @click="touDialog">
			<div class="kuang" @click="stopMaopao">
				<p class="up fi">修改头像</p>
					<p class="fil">
						<input type="file" @change="chooseImage($event)" accept="image/*" name="photo" class="photo" />
						<i class="iconfont i">&#xe62d;&nbsp;&nbsp;<span>相册</span></i>
					</p>
					<p class="fil fi">
						<input type="file" accept="image/*" capture="camera" class="cemera">
						<i class="iconfont is">&#xe622;&nbsp;&nbsp;<span>拍照</span></i>
					</p>
			</div>
		</div>
	</div>

</template>

<script>
	//先获取到数据然后可以更改
	//改图片和性别要向后台发送请求，
	//发送请求的时候直接获取this.sexbind
	export default {
		data() {
			return {
				nicheng: '',
				//男女数据
				sexbind: '',
				//性别是否弹窗标记
				isShow: false,
				//性别选择标记
				boySign: true,
				girlSign: false,
				//头像弹窗标记
				touShow: false,

				productImage: [],
				files: [],
				//此用户的信息
				infos: {},
			}; 
		},
		mounted: function() {
			//获取用户的信息 
			var params = new URLSearchParams();
			var info = window.localStorage.data;
			this.$axios.get('One/My/myCenter/token/' + info).then((res) => {
				if(res.data.status == 1) {
					this.infos = res.data.data
					if(this.infos.u_sex == '1') {
						this.sexbind = '男'
					} else if(this.infos.u_sex == '2') {
						this.sexbind = '女'
					} 
				}
			}).catch((err) => {
				console.log(err)
			})
		},
		methods: {
			//上传图片
			chooseImage(event) {
				var params = new URLSearchParams();
				var info = window.localStorage.data;
				params.append('token', info); //客户秘钥（信息）
				var formData = new FormData();
				formData.append('token', info);
				formData.append('path',"userImg");
				formData.append('img', event.target.files[0]);
				formData.append('height', 70);
				this.$axios({
					url: 'One/Upload/uploadImg',
					method: 'post',
					data: formData
				}).then((res)=> {
					var imgs = res.data.data
					if(res.data.status == 1){
						params.append('token',info);
						params.append('data',imgs);
						params.append('type',1);
			          	this.$axios({
							url: "One/My/myCenter",
							method: "POST",
							data: params
						}).then((res) => {
							if(res.data.status == 1){
								this.touShow = false;
								this.infos.u_img = imgs;
							}else if(res.data.status == 0){
								alert("修改失败，请重新修改")
							}
						}).catch(function(err) {
							console.log(err)
						})
						
					}else if(res.data.status == 0){
						alert("上传错误")
					}else  if(res.data.status == 2){
						alert("参数错误")
					}
				}).catch(function() {
					alert("返回错误")
				});
	      		for(var i = 0;i< event.target.files.length;i++){
	        		this.productImage.push(event.target.files[0]);
	        		var url = URL.createObjectURL(event.target.files[0]);
	        		this.files.push(url);
	      		}
			},
			//弹出窗口
			sex: function() {
				let sex = this.sexbind;
				if(sex == "男") {
					this.boySign = true;
					this.girlSign = false;
				} else {
					this.boySign = false;
					this.girlSign = true;
				}
				this.isShow = true;
			},
			//消失窗口
			xingbie: function() {
				this.isShow = false;
			},
			//阻止事件冒泡
			stopMaopao: function(event) {
				var event = event || window.event;
				event.stopPropagation();
			},
			//第一个p点击
			firstP: function(num) {
				this.sexbind = num;
				this.boySign = true;
				this.girlSign = false;
			},
			secondP: function(num) {
				this.sexbind = num;
				this.boySign = false;
				this.girlSign = true;
			},

			//点击头像触发事件弹窗
			touxiang: function() {
				this.touShow = true;
			},
			//点击半透明遮罩弹窗消失
			touDialog: function() {
				this.touShow = false;
			},
			//保存当前信息，向后端发送请求
			save: function() {
				var sex = 2;
				var params = new URLSearchParams();
				var info = window.localStorage.data;
				params.append('token', info); //客户秘钥（信息）
				if(this.sexbind == "男"){
					sex = 1
				}else{
					sex = 2
				}
				params.append('data', sex);//性别
				params.append('type',3);
	          	this.$axios({
					url: "One/My/myCenter",
					method: "POST",
					data: params
				}).then((res) => {
					if(res.data.status == 1){
						this.infos.u_sex = this.sexbind;
						alert("修改成功")
						this.$router.push("imy")
					}
				}).catch(function(err) {
					console.log(err)
				})

			}
		}
	};
</script>

<style  scoped="scoped">
	@import "../css/public.css";
	@import "../css/iInfo.css";
</style>